<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" placeholder="请输入1-100的整数" v-model="csz">
    <input type="button" value="猜一猜" @click="f()">
    <h1>{{b}}</h1>
</div>
<!--引入vue-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
<script>
    let count=0;//记录猜的次数
    let x = parseInt(Math.random() * 100) + 1;
    console.log(x)
    let v = new Vue({
        el: "div",
        data: {
            csz: "",
            b:""
        },
        methods: {
            f: function () {
                if (isNaN(v.csz)){
                    v.b="输入错误"
                    return;
                }
                count++;
                //v.info代表的是用户输入的内容
                if (x>v.csz){
                    v.b="猜小了"
                }else if (x<v.csz){
                    v.b="猜大了"
                }else {
                    v.b="恭喜你第"+count+"次猜对了";
                }
            }
        }
    })
</script>
</body>
</html>